<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://www.pimpas.net/web/jsf" prefix="pimp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view>
	<html>
	<head>
	<title>PIMPAS FRAMEWORK - CARS CRUD</title>
	<style>
	.toolbar {
		width: 600px;
		height: 25px;
		background-color: pink;
	}
	
	.loading {
		visibility: hidden;
		display: none;
	}
	</style>
	</head>
	<body>
		<pimp:div id="ajaxDiv">
			<pimp:span><h:outputText value="#{crudCar.randomText}"/></pimp:span>
		</pimp:div>
			<pimp:span id="loadingRequest" styleClass="loading">
				<h:outputText value="Loading..."></h:outputText>
			</pimp:span>
		<h:form>
			<pimp:div styleClass="toolbar">
				<h:commandButton id="addNewCar" value="New" type="button" actionListener="#{crudCar.addCar}">
					<pimp:ajaxPopulate control="loadingRequest" immediate="true" render="carsTable,spanEl,ajaxDiv,someLink,someText,someGrid,accordPanel,myGroup,findCar" event="onClick"/>
				</h:commandButton>
				<h:commandButton id="deleteCar" value="Delete" type="button" actionListener="#{crudCar.deleteCar}"></h:commandButton>
				<h:commandButton id="findCar" value="#{crudCar.randomText}" type="button" actionListener="#{crudCar.findCar}"></h:commandButton>
				<h:outputText value=" Toolbar Buttons"></h:outputText>
			</pimp:div>	
			<h:panelGrid columns="3">
				<h:outputLabel for="carName">
					<h:outputText value="Car Name: "></h:outputText>
				</h:outputLabel>
				<h:inputText id="carName" value="#{crudCar.car.name}"></h:inputText>
				<pimp:message for="carName"></pimp:message>
			</h:panelGrid>
			<pimp:simpleTag tag="hr"></pimp:simpleTag>
			<h:dataTable id="carsTable" columnClasses="list-column-center" headerClass="list-header"
			 rowClasses="list-row" styleClass="list-background" value="#{crudCar.cars}" var="sc">   
				<h:column>
					<f:facet name="header">
						<h:outputText value="Nome"/>
					</f:facet>
					<h:outputText value="#{sc.name}"/>
				</h:column>
			</h:dataTable>
			<pimp:simpleTag tag="hr"></pimp:simpleTag>
			<pimp:span id="spanEl">
				<h:outputText value="Size of Cars List: "></h:outputText>
				<h:outputText value="#{crudCar.qnt}"></h:outputText>
			</pimp:span>
			<pimp:simpleTag tag="br"></pimp:simpleTag>
			<h:commandLink id="someLink">
				<h:outputText value="#{crudCar.randomText}"></h:outputText>
			</h:commandLink>
		</h:form>
		<h:outputText id="someText" value="#{crudCar.randomText}"></h:outputText>
		<h:panelGrid id="someGrid">
			<h:column>
				<f:facet name="header">
					<h:outputText value="Random Text"></h:outputText>
				</f:facet>
				<h:outputText value="#{crudCar.randomText}"></h:outputText>
			</h:column>
		</h:panelGrid>
		<pimp:simpleTag tag="hr"></pimp:simpleTag>
		<pimp:accordionPanel title="Ajax AccordionPanel" id="accordPanel">
			<h:outputText value="#{crudCar.randomText}"></h:outputText>
		</pimp:accordionPanel>
		<pimp:simpleTag tag="hr"></pimp:simpleTag>
		<pimp:group title="MyGroup" id="myGroup">
			<h:outputText value="#{crudCar.randomText}"></h:outputText>
		</pimp:group>
		<pimp:ajaxPoolSize value="30"></pimp:ajaxPoolSize>
	</body>
	</html>
</f:view>